<template>
	<view>
		<scroll-view scroll-x :scroll-left=scrollLeft @scroll="onScrool">
			<view class="scrool_box">
				<view @click="changeCount(index)" v-for="(item,index) in scroolList" :key="index"
					:class="['scrool_item',index==count?'active':'']">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<scroll-view class="scrool_bottom">
			<view class="scrool_bottom_box">
				<view v-for="(item,index) in goodsList.goodsData" :key="index" class="imgs_box">
					<view class="">
						<image class="imgs" :src="item.imgSrc" mode=""></image>
					</view>
					<view class="">
						{{item.goods_Name}}
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import {
		goodsList
	} from '../../untils/goodsList'
	import {
		defineComponent,
		ref
	} from "vue";
	export default defineComponent({
		setup() {
			let scroolList = ref(['男装', '女装', '男装', '女装', '男装', '女装', '男装', '女装', '男装', '女装', '男装', '女装']) //分类列表
			let count = ref(0) //点击下标
			let scrollLeft = ref(0) //滚动位置
			let leftList = ref([]) //瀑布流左边列表
			let rightList = ref([]) //瀑布流右边列表''

			let changeCount = (e: number) => {
				count.value = e
				scrollLeft.value = 192
				console.log(scrollLeft, goodsList)
			}
			let onScrool = (event: any) => {
				console.log(event.detail)
			}



			return {
				scroolList,
				count,
				changeCount,
				scrollLeft,
				onScrool,
				leftList,
				rightList,
				goodsList
			};
		},

	});
</script>

<style lang="scss" scoped>
	.scrool_box {
		display: flex;
		width: 100%;

		.scrool_item {
			width: 50px;
			flex-shrink: 0;
			text-align: center;
		}
	}

	.active {
		font-weight: 800;
		color: #ff0000;
		font-size: 18px
	}

	.scrool_bottom_box {
		// display: flex;
		column-count: 2;
		column-gap: 10px;
		width: 100%;
		.imgs_box {
			width: 150px;

			.imgs {
				width: 100%;
			}
		}
	}
</style>
